<template>
  <view :style="viewColor">
    <view class="product-con">
      <view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
        <view class="head-menu">
          <view class='iconfont icon-fanhui2' @click="returns"></view>
          <view class="iconfont icon-gengduo5" @click="showNav"></view>
        </view>
      </view>
      <!-- 导航小图标 -->
      <view class="dialog_nav" v-show="currentPage" :style="{ top: navH + 'rpx' }">
        <view class="dialog_nav_item" :class="item.after" v-for="(item,index) in selectNavList" :key="index"
              @click="linkPage(item.url)">
          <text class="iconfont" :class="item.icon"></text>
          <text class="pl-20">{{item.name}}</text>
        </view>
      </view>
      <view v-if="storeInfo && storeInfo.merchant">
        <scroll-view :scroll-top="scrollTop" scroll-y='true' scroll-with-animation="true" :style='"height:"+height+"px;"'
                     @scroll="scroll">
          <view id="past0">
            <!-- #ifdef MP || APP-PLUS -->
            <view class="" :style="'width:100%;' + 'height:'+sysHeight + 'px'"></view>
            <!-- #endif -->
            <productConSwiper :imgUrls="storeInfo.slider_image" :videoCoverImg="videoCoverImg" :videoline="storeInfo.video_link"></productConSwiper>
            <!--有氛围图-->
            <view v-if="storeInfo.atmosphere_pic" :style="{ backgroundImage: `url(${storeInfo.atmosphere_pic})` }" class='nav acea-row row-between-wrapper'>
              <view class='money skeleton-rect'>￥<text class='num'>{{storeInfo.price || 0}}</text>
                <text v-if="!svipData"  class='y-money'>￥{{marketPrice || 0}}</text>
                <view class="atmosphere" v-if="svipData && svipData.show_svip_price && svipData.show_svip" style="display: inline-block;">
                  <text class="vip-money">￥{{storeInfo.svip_price}}</text>
                  <image class="vip-image" :src="`${domain}/static/images/svip.png`"></image>
                </view>
              </view>
            </view>
            <view class='wrapper'>
              <view v-if="storeInfo.atmosphere_pic" class='introduce skeleton-rect acea-row atmosphere'>
                <view class="title">
                  <!-- <text v-if="(storeInfo.merchant && storeInfo.merchant.type_name)" class="font-bg-red bt-color">{{storeInfo.merchant.type_name}}</text>
                  <text v-else-if="(storeInfo.merchant && storeInfo.merchant.is_trader)" class="font-bg-red bt-color">自营</text> -->
                  {{storeInfo.store_name || ''}}
                </view>
                <view v-if="storeInfo.mer_reward_status == 1" class='integral_count skeleton-rect'>
                  <text v-if="storeInfo.mer_reward_rate > 0" class='reward'>+{{rewardPrice}}</text>
                </view>
                <view class="fenxiang_btn">
                  <view @click="setCollect"><text class="iconfont" :class="storeInfo.isRelation ? 'icon-yishoucang2' : 'icon-shoucang4'"></text><br/>收藏</view>
                  <view @click="listenerActionSheet"><text class="iconfont icon-fenxiang4"></text><br/>分享</view>
                </view>
              </view>
              <view v-if="storeInfo.atmosphere_pic" class='integral_count skeleton-rect'>
                <text v-if="storeInfo.max_integral > 0" class='integral'>积分最高可抵扣{{storeInfo.max_integral}}元</text>
                <text v-if="storeInfo.delivery_free == 1" class='integral'>包邮</text>
              </view>
              <!--无氛围图-->
              <view v-else class='share acea-row row-between row-bottom'>
                <view class='money p-color skeleton-rect' style="min-width: 70rpx;">
                  ￥
                  <text class='num'>{{storeInfo.price}}</text>
                  <view v-if="svipData && svipData.show_svip_price && svipData.show_svip" style="display: inline-block;">
                    <text class="vip-money">￥{{storeInfo.svip_price || 0}}</text>
                    <image class="vip-image" :src="`${domain}/static/images/svip.png`"></image>
                  </view>
                </view>
                <view class="fenxiang_btn">
                  <view @click="setCollect">
                    <text class="iconfont" :class="storeInfo.isRelation ? 'icon-yishoucang2' : 'icon-shoucang4'"></text><br/>收藏
                  </view>
                  <view @click="listenerActionSheet"><text class="iconfont icon-fenxiang4"></text><br/>分享</view>
                </view>
              </view>
              <view
                  v-if="svipData && !svipData.is_svip && svipData.show_svip"
                  class="svipCon acea-row row-between-wrapper skeleton-rect" style="margin-top: 20rpx;">
                <view class="acea-row row-between-wrapper">
                  <image :src="`${domain}/static/images/svip_user.png`"></image>
                  <view class="">开通 SVIP会员
                    <block v-if="svipData.show_svip_price">立省<text>{{svipData.save_money}}元</text></block>
                    <block v-else><text>省钱多多，权益多多</text></block>
                  </view>
                </view>
                <navigator class="svipBtn" url="/pages/annex/vip_paid/index">
                  立即开通
                  <text class="iconfont icon-jiantou"></text>
                </navigator>
              </view>
              <view v-if="!storeInfo.atmosphere_pic" class='integral_count skeleton-rect'>
                <text v-if="storeInfo.max_integral > 0" class='integral'>积分最高可抵扣{{storeInfo.max_integral}}元</text>
                <text v-if="storeInfo.delivery_free == 1" class='integral'>包邮</text>
              </view>
              <view v-if="!storeInfo.atmosphere_pic" class='introduce skeleton-rect'>
                <!-- <text v-if="storeInfo.merchant.type_name" class="font-bg-red bt-color">{{storeInfo.merchant.type_name}}</text>
                <text v-else-if="storeInfo.merchant.is_trader" class="font-bg-red bt-color">自营</text> -->
                {{storeInfo.store_name || ''}}
              </view>
              <view class='label acea-row row-between-wrapper' :style="{'padding-bottom':coupon.list.length || storeInfo.top_pid?0 :10+'px;'}">
                <view class="skeleton-rect">市场价:￥{{marketPrice || 0}}</view>
                <view class="skeleton-rect">库存:{{storeInfo.stock ? storeInfo.stock : 0}}{{storeInfo.unit_name ? storeInfo.unit_name : ''}}</view>
                <view class="skeleton-rect">销量:{{storeInfo.sales ? storeInfo.sales : 0}}{{storeInfo.unit_name ? storeInfo.unit_name : ''}}</view>
              </view>
              <navigator v-if="storeInfo.top_pid" hover-class='none' :url="`/pages/activity/rank/index?cate_id=${storeInfo.top_pid}`" class='label'>
                <view class="rank_list acea-row row-between-wrapper">
                  <view class="acea-row row-between-wrapper">
                    <text class="rank_title"></text>
                    <view>{{ storeInfo.top_name }} · 第{{ storeInfo.top_num }}名</view>
                  </view>
                  <text class="iconfont icon-xiala1"></text>
                </view>
              </navigator>
              <view class='coupon acea-row row-between-wrapper skeleton-rect' @click='couponTap' style="margin-top: 20rpx;" v-if="coupon.list.length > 0">
                <view class='hide line1 acea-row'>
                  优惠券：
                  <view class='activity' v-for="(item,index) in coupon.list" :key="index">满{{item.use_min_price}}减{{item.coupon_price}}</view>
                </view>
                <view class='iconfont icon-jiantou'></view>
              </view>
            </view>
            <view class='attribute acea-row row-between-wrapper skeleton-rect' @click="selecAttr">
              <view class="acea-row row-between-wrapper">{{attrTxt}}：
                <text class='atterTxt'>{{attrValue}}</text>
              </view>
              <view class='iconfont icon-jiantou'></view>
            </view>
            <view v-if="specsInfo.params && specsInfo.params.length>0" class="attribute acea-row row-between-wrapper" @click="seeSpecs">
              <view class="acea-row row-middle">
                参数：
                <view class="list line1">
                  <text class="item params" v-for="(item,index) in specsInfo.params" :key="index"
                        v-if="index<2">{{item.name}}</text>
                  <text>...</text>
                </view>
              </view>
              <view class="iconfont icon-jiantou"></view>
            </view>
            <!--运费-->
            <view v-if="shipping || shippingValue" class='attribute acea-row row-between-wrapper' @click="showShip">
              <view class="acea-row row-between-wrapper">运费：
                <text class='atterTxt'>{{shippingValue}}</text>
              </view>
              <view class='iconfont icon-jiantou'></view>
            </view>
            <!--保障-->
            <view v-if="guarantee && guarantee.length" class='attribute acea-row row-between-wrapper' @click="showGuaranee">
              <view class="acea-row row-between-wrapper">保障：
                <view class="guaranteeAttr">
                  <text class='atterTxt1' :class="item.guarantee_name ? 'hasAttr' : ''"  v-for="(item,index) in guarantee">
                    {{item.guarantee_name ? item.guarantee_name : ''}}
                  </text>
                </view>
              </view>
              <view class='iconfont icon-jiantou'></view>
            </view>
          </view>
          <!--优惠套餐-->
          <view class='combo' v-if="comboList && comboList.length>0">
            <view class='title acea-row row-between-wrapper'>
              <view>优惠套餐({{comboTotal}}) </view>
              <view class='praise' @click="openCombo">
                查看全部
                <text class='iconfont icon-jiantou'></text>
              </view>
            </view>
            <scroll-view scroll-x="true" style="white-space: nowrap; display: flex;height: 180rpx;" show-scrollbar="false">
              <view class="img-box">
                <view class="combo_item" v-for="(item,index) in comboList" :key="index">
                  <view class="img-item" v-for="(itemn,indexn) in item.discountsProduct" :key="indexn">
                    <image :src="itemn.image" mode="" @click="openCombo"></image>
                    <text v-if="indexn != item.count-1" class="iconfont icon-jiahao2"></text>
                  </view>
                  <view class="list_total">
                    <view class="list_num">共{{item.count}}件</view>
                    <view class="list_price p-color">省 ¥{{item.max_price}}</view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class='userEvaluation' id="past1" v-if="replyCount && replyCount>0">
            <view class='title acea-row row-between-wrapper skeleton-rect'>
              <view>用户评价({{replyCount}})</view>
              <navigator class='praise' hover-class='none' :url='"/pages/users/goods_comment_list/index?product_id="+id'>
                <text class='t-color'>{{replyChance}}</text>好评率
                <text class='iconfont icon-jiantou'></text>
              </navigator>
            </view>
            <block v-if="replyCount && replyCount>0">
              <userEvaluation :reply="reply"></userEvaluation>
            </block>
          </view>
          <!-- 种草秀 -->
          <view class='userPlant' v-if="storeInfo.community && storeInfo.community.length>0">
            <view class='title acea-row row-between-wrapper'>
              <view>种草秀 </view>
              <navigator class='praise' hover-class='none' :url="'/pages/plantGrass/plant_show/index?spu_id='+storeInfo.spu_id">
                查看全部
                <text class='iconfont icon-jiantou'></text>
              </navigator>
            </view>
            <view class="imgList acea-row">
              <view class="pictrue" v-for="(item, index) in storeInfo.community" :key="index" v-if="index<=2"
                    @click="goPlant(item)">
                <image :src="item.image[0]" class="image"></image>
                <image v-if="item.is_type == 2" class="video_img" src="@/static/images/stop.png" mode=""></image>
              </view>
            </view>
          </view>
          <!-- 商铺信息 -->
          <view class="store-wrapper" v-if="storeInfo.merchant && hide_mer_status !=1">
            <view class="store-hd skeleton-rect">
              <view v-if="storeInfo.merchant&&hide_mer_status != 1" class="store-info">
                <navigator :url="'/pages/store/home/index?id='+storeInfo.mer_id" hover-class="none" class="logo">
                  <image :src="storeInfo.merchant.mer_avatar" mode=""></image>
                </navigator>
                <navigator :url="'/pages/store/home/index?id='+storeInfo.mer_id" hover-class="none" class="info">
                  <view class="name line1">
                    <text>{{storeInfo.merchant.mer_name ? storeInfo.merchant.mer_name : ''}}</text>
                    <image v-if="margin_ico_switch==1 && margin_ico && storeInfo.merchant.is_margin == 10" :src="margin_ico" class="store-margin"></image>
                    <!-- <text v-if="storeInfo.merchant.type_name" class="font-bg-red ml8 bt-color">{{storeInfo.merchant.type_name}}</text>
                    <text v-else-if="storeInfo.merchant.is_trader" class="font-bg-red ml8 bt-color">自营</text> -->
                  </view>
                  <view v-if="storeInfo.merchant.care_count" class="txt">
                    {{storeInfo.merchant.care_count < 10000 ? storeInfo.merchant.care_count : (storeInfo.merchant.care_count/10000).toFixed(2)+'万'}}人关注
                  </view>
                  <view v-else class="txt">0人关注</view>
                </navigator>
                <navigator v-if="hide_mer_status != 1" :url="'/pages/store/home/index?id='+storeInfo.mer_id" class="link"
                           hover-class="none">进店</navigator>
              </view>
              <view class="score-wrapper">
                <view class="item">
                  商品描述<text>{{storeInfo.merchant.product_score}}</text>
                </view>
                <view class="item">
                  卖家服务<text>{{storeInfo.merchant.service_score}}</text>
                </view>
                <view class="item">
                  物流服务<text>{{storeInfo.merchant.postage_score}}</text>
                </view>
              </view>
            </view>
            <view v-if="recommend && recommend.length > 0" class="con-box">
              <view class="acea-row row-between">
                <view class="title">店铺推荐</view>
                <navigator v-if="hide_mer_status!=1" class="moer-btn" :url="'/pages/store/home/index?id='+storeInfo.mer_id" hover-class="none">
                  查看更多<text class='iconfont icon-jiantou'></text></navigator>
              </view>
              <!-- <scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
                <view class="img-box">
                  <view class="img-item" v-for="(item,index) in storeInfo.merchant.recommend" :key="index" @click="goProDetail(item)">
                    <easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
                    <view class="txt">
                      <view class="title line1">{{item.store_name}}</view>
                      <view class="price">
                        <text>￥</text>{{item.price}}
                      </view>
                    </view>
                  </view>
                </view>
              </scroll-view> -->
              <view class="swiper page_swiper">
                <swiper
                    indicator-dots="true"
                    :autoplay="false"
                    :circular="circular"
                    :interval="interval"
                    :duration="duration"
                    :current="swiperCur"
                    style="750rpx;"
                >
                  <block v-for="(item,index) in recommend" :key="index">
                    <swiper-item class="swiper-item">
                      <view class="img-box">
                        <view class="img-item" v-for="(itm,idx) in item" :key="idx" @click="goProDetail(itm)">
                          <easy-loadimage mode="widthFix" :image-src="itm.image"></easy-loadimage>
                          <view class="txt">
                            <view class="title line1">{{itm.store_name}}</view>
                            <view class="price">
                              <text>￥</text>{{itm.price}}
                            </view>
                          </view>
                        </view>
                      </view>
                    </swiper-item>
                  </block>
                </swiper>
              </view>
            </view>
          </view>
          <view class='product-intro' id="past3">
            <view class='title'>产品介绍</view>
            <view class='conter' v-if="description">
              <!-- #ifndef APP-PLUS -->
              <jyf-parser v-if="description.type == 0" :domain='domain' :html="description.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <view v-if="description.type == 0" class="description" v-html="description.content.replace(/<br\/>/ig, '')"></view>
              <!-- #endif -->
              <view v-else class="product_content">
                <view v-if="description.content && description.content.title" class="title">{{description.content.title}}</view>
                <view v-if="description.content && description.content.image" class="pictures">
                  <image v-for="(item,index) in description.content.image" :key="index" :src="item"></image>
                </view>
              </view>
            </view>
            <!-- 价格说明 -->
            <view v-if="priceRule.content" class="price-info">
              <view class="price-title">{{priceRule.rule_name}}</view>
              <!-- #ifndef APP-PLUS -->
              <jyf-parser :domain='domain' :html="priceRule.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <view class="description" v-html="priceRule.content.replace(/<br\/>/ig, '')"></view>
              <!-- #endif -->
            </view>
          </view>
          <view class="content-height"></view>
        </scroll-view>
      </view>
      <view class='footer acea-row row-between-wrapper' :class="{'footpl':hide_mer_status==1}">
        <navigator v-if="hide_mer_status !=1" :url="'/pages/store/home/index?id='+storeInfo.mer_id" class='item skeleton-rect'>
          <view class='iconfont icon-dianpu2'></view>
          <view>店铺</view>
        </navigator>
        <block v-if="storeInfo.merchant">
          <view v-if="storeInfo.merchant.services_type== 0" class="item skeleton-rect" @click="goCustomer">
            <view class="iconfont icon-kefu"></view>
            <view>客服</view>
          </view>
          <view v-else class="item skeleton-rect" @click="call">
            <view class="iconfont icon-kefu"></view>
            <view>客服</view>
          </view>
        </block>
        <navigator open-type='switchTab' class="animated item skeleton-rect" :class="animated==true?'bounceIn':''" url='/pages/order_addcart/order_addcart'
                   hover-class="none">
          <view class='iconfont icon-gouwuche1'>
            <text v-if="CartCount>0" class='num'>{{CartCount || 0}}</text>
          </view>
          <view>购物车</view>
        </navigator>
        <view v-if="attr.productSelect.stock != 0" class='bnt acea-row skeleton-rect'>
          <form @submit="joinCart" report-submit='true'>
            <button v-if="storeInfo.type != 1&&storeInfo.type != 2&&!storeInfo.mer_form_id" class='joinCart bnts' form-type="submit">加入购物车</button>
          </form>
          <form @submit="goBuy" report-submit='true' v-if="attr.productSelect">
            <button class='buy bnts' :class="(storeInfo.type == 1 || storeInfo.type == 2 || storeInfo.mer_form_id) ? 'virtual_buy' : ''" form-type="submit" :disabled="attr.productSelect.stock == 0">立即购买</button>
          </form>
        </view>
        <view v-else class='bnt acea-row skeleton-rect'>
          <form report-submit='true'>
            <button v-if="procudt_increase_status == 1" class='buy bnts sold_out' form-type="submit" @click="arrivalNotice">到货通知</button>
            <button v-else class='buy bnts sold_out' form-type="submit" disabled>商品已售罄</button>
          </form>
        </view>
      </view>
      <block v-if="sharePacket.max&&sharePacket.max>0">
        <shareRedPackets :sharePacket="sharePacket" @listenerActionSheet="listenerActionSheet" @closeChange="closeChange"
                         :showAnimate="showAnimate" @boxStatus="boxStatus"></shareRedPackets>
      </block>
      <!-- 组件 -->
      <productWindow :attr="attr" :isShow='1' :iSplus='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNum"
                     @attrVal="attrVal" @iptCartNum="iptCartNum" id='product-window' :payLimit="pay_limit" :maxCount="max_count" :minCount="min_count" :svipPrice="svipPrice" :image="storeInfo.image"></productWindow>
      <block v-if="coupon.coupon">
        <couponListWindow :coupon='coupon' @ChangCouponsClose="ChangCouponsClose" @ChangCoupons="ChangCoupons"
                          @ChangCouponsUseState="ChangCouponsUseState"></couponListWindow>
      </block>
      <specs :specsInfo="specsInfo" @myevent="mySpecs"></specs>
      <!-- 分享按钮 -->
      <view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
        <!-- #ifndef MP -->
        <button class="item" :class="weixinStatus ? 'item3' : ''"  hover-class='none' v-if="weixinStatus === true" @click="H5ShareBox = true">
          <view class="iconfont icon-weixin3"></view>
          <view class="">发送给朋友</view>
        </button>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <button class="item" :class="weixinStatus ? 'item3' : ''" open-type="share" hover-class='none' @click="goFriend">
          <view class="iconfont icon-weixin3"></view>
          <view class="">发送给朋友</view>
        </button>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view class="item" @click="appShare('WXSceneSession')">
          <view class="iconfont icon-weixin3"></view>
          <view class="">分享给好友</view>
        </view>
        <!-- #endif -->
        <button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @click="downloadFilePromotionCode">
          <view class="iconfont icon-haibao"></view>
          <view class="">生成海报</view>
        </button>
        <button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @click="copyPwd">
          <view class="iconfont icon-fuzhikouling1"></view>
          <view>生成口令</view>
        </button>
      </view>
      <view class="mask" v-if="posters" @click="listenerActionClose"></view>
      <view class="mask_transparent" v-if="currentPage" @touchmove="hideNav" @click="hideNav()"></view>
      <!--口令复制结果-->
      <copyPassword :isCopy='isCopy' :copyUrl='copyUrl' @close="closeCopy"></copyPassword>
      <!-- 海报展示 -->
      <view class='poster-pop' v-if="posterImageStatus">
        <image src='../../static/images/poster-close.png' class='close' @click="posterImageClose"></image>
        <image :src='posterImage'></image>
        <!-- #ifndef H5  -->
        <view class='save-poster' @click="savePosterPath">保存到手机</view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view class="keep">长按图片可以保存到手机</view>
        <!-- #endif -->
      </view>
      <view class='mask' v-if="posterImageStatus"></view>
      <canvas class="canvas" canvas-id='myCanvas' v-if="canvasStatus"></canvas>
      <!-- 发送给朋友图片 -->
      <view class="share-box" v-if="H5ShareBox">
        <image :src="`${domain}/static/images/share-info.png`" @click="H5ShareBox = false"></image>
      </view>
      <guaranteeTemplate ref="guartemplate" :guarantee='guarantee' :shipping='shipping'></guaranteeTemplate>
      <!-- #ifndef H5 -->
      <passwordPopup></passwordPopup>
      <!-- #endif -->
      <!--套餐产品弹窗-->
      <discounts-goods ref="discounts" :uid="uid"></discounts-goods>
    </view>
  </view>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
var sysHeight = uni.getSystemInfoSync().statusBarHeight;
import { arrivalSubscribe } from '@/utils/SubscribeMessage.js';
import {
  getChainBoostProductDetail,
  getChainBoostProductParmas,
  getProductCode,
  collectAdd,
  collectDel,
  postCartAdd,
  arrivalNoticeApi,
  copyPasswordApi, getDiscountsLst, priceRuleApi
} from '@/api/store.js';
import {
  getProductParmas,
} from '@/api/store.js';
// import { getOrderConfirm } from '@/api/order.js';
import { getUserInfo, imgToBase } from '@/api/user.js';
import { getCoupons,getShopCoupons } from '@/api/api.js';
import { getCartCounts } from '@/api/order.js';
import { mapGetters } from "vuex";
import { configMap } from "@/utils";
// import { imageBase64 } from "@/api/public";
import productConSwiper from '@/components/productConSwiper';
import couponListWindow from '@/components/couponListWindow';
import copyPassword from '@/components/copyPassword';
import productWindow from '@/components/productWindow';
import userEvaluation from '@/components/userEvaluation';
import shareRedPackets from '@/components/shareRedPackets';
import specs from '@/components/specs/index.vue';
import Cache from '@/utils/cache';
import { toLogin } from '@/libs/login.js';
// #ifndef H5
import passwordPopup from '@/components/passwordPopup';
// #endif
import { HTTP_REQUEST_URL } from '@/config/app';
import { CART_TIME,CART_ID} from '@/config/cache';
import home from '@/components/home';
import { silenceBindingSpread } from "@/utils";
import parser from "@/components/jyf-parser/jyf-parser";
import history from "@/mixins/history";
import shareScence from "@/libs/spread";
import guaranteeTemplate from '@/components/freightGuarantee';
import discountsGoods from './discountsGoods';
// import ClipboardJS from "@/plugin/clipboard/clipboard.js";
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
let app = getApp();
export default {
  components: {
    // #ifndef H5
    passwordPopup,
    // #endif
    productConSwiper,
    couponListWindow,
    productWindow,
    userEvaluation,
    shareRedPackets,
    home,
    guaranteeTemplate,
    copyPassword,
    discountsGoods,
    "jyf-parser": parser,
    easyLoadimage,
    specs,
  },
  mixins: [history],
  data() {
    let that = this;
    return {
      isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
      sysHeight: sysHeight, //系统导航条高度
      //属性是否打开
      coupon: {
        'coupon': false,
        list: [],
      },
      attrTxt: '选择', //属性页面提示
      attrValue: '', //已选属性
      animated: false, //购物车动画
      id: 0, //商品id
      replyCount: 0, //总评论数量
      reply: [], //评论列表
      storeInfo: {
        merchant: {}
      }, //商品详情
      productValue: [], //系统属性
      couponList: [], //优惠券
      cart_num: 1, //购买数量
      isOpen: false, //是否打开属性组件
      actionSheetHidden: true,
      posterImageStatus: false,
      storeImage: '', //海报产品图
      PromotionCode: '', //二维码图片
      canvasStatus: false, //海报绘图标签
      posterImage: '', //海报路径
      posterbackgd: '/static/images/posterbackgd.png',
      source: '',
      sharePacket: {
        isState: true, //默认不显示
      }, //分销商详细
      // uid: 0, //用户uid
      circular: false,
      autoplay: false,
      interval: 3000,
      duration: 500,
      swiperCur: 0,
      clientHeight: "",
      systemStore: {}, //门店信息
      replyChance: 0,
      CartCount: 0,
      storeSelfMention: true,
      posters: false,
      weixinStatus: false,
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {}
      },
      description: {},
      navActive: 0,
      H5ShareBox: false, //公众号分享图片
      activity: [],
      retunTop: true, //顶部返回
      navH: "",
      navList: [],
      opacity: 0,
      scrollY: 0,
      topArr: [],
      toView: '',
      height: 0,
      heightArr: [],
      lock: false,
      scrollTop: 0,
      tagStyle: {
        img: 'width:100%;display:block;'
      },
      // 动画状态
      showAnimate: true,
      domain: HTTP_REQUEST_URL,
      currSpid: '',
      codeImg: "",
      videoCoverImg: "",
      shipping: "",
      guarantee: [],
      shippingValue: "",
      uniqueValue: "",
      priceRule: "",
      isCopy: false,
      copyUrl: '',
      comboTotal: 0,
      comboList: [],
      max_count: 0,
      min_count: 0,
      pay_limit: 1,
      svipData: {},
      svipPrice: false,
      specsInfo: {
        show: false,
        params: []
      },
      recommend: [],
      serviceInfo: {},
      currentPage: false,
      homeTop: 59,
      marketPrice: "",
      rewardPrice: "",
      selectNavList: [{
        name: '首页',
        icon: 'icon-shouye8',
        url: '/pages/index/index',
        after: 'dialog_after'
      },
        {
          name: '搜索',
          icon: 'icon-sousuo6',
          url: '/pages/columnGoods/goods_search_con/index',
          after: 'dialog_after'
        },
        {
          name: '购物车',
          icon: 'icon-gouwuche7',
          url: '/pages/order_addcart/order_addcart',
          after: 'dialog_after'
        },
        {
          name: '我的收藏',
          icon: 'icon-shoucang3',
          url: '/pages/users/user_goods_collection/index',
          after: 'dialog_after'
        },
        {
          name: '个人中心',
          icon: 'icon-gerenzhongxin1',
          url: '/pages/user/index'
        },
      ],
    };
  },
  computed:{
    ...configMap(['margin_ico_switch','margin_ico','hide_mer_status','procudt_increase_status','site_name','share_pic'], mapGetters(['isLogin','uid','viewColor'])),
  },
  onLoad(options) {
    let that = this
    if (options.spid) {
      app.globalData.spid = options.spid;
      that.currSpid = options.spid
    }
    var pages = getCurrentPages();
    let curPage = pages[pages.length - 1];
    if (pages.length <= 1) {
      that.retunTop = false
    }
    let curParam = curPage.options || curPage.$route.query;
    that.source = curParam.source;
    that.navH = app.globalData.navHeight+10;
    //页面中需要计算的一些值
    // #ifdef APP-PLUS
    that.homeTop = (that.sysHeight + 8)*2;
    // #endif
    // #ifdef H5
    that.homeTop = 10;
    // #endif
    that.id = options.id;
    uni.getSystemInfo({
      success: function(res) {
        that.height = res.windowHeight
        //res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
        that.navHeight = res.statusBarHeight * (750 / res.windowWidth) + 91;
      },
    });
    //扫码携带参数处理
    // #ifdef MP
    if (options.scene) {
      let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
      if (value.id) options.id = value.id;
      //记录推广人uid
      if (value.spid) {
        app.globalData.spid = value.spid;
        that.currSpid = value.spid
      }
    }
    if (!options.id && !options.scene) {
      return this.$util.Tips({
        title: '缺少参数无法查看商品'
      }, {
        tab: 3,
        url: 1
      });
    } else {
      this.id = options.id
    }
    //记录推广人uid
    if (options.spid) app.globalData.spid = options.spid;
    // #endif
    shareScence(that.currSpid, that.isLogin)
    this.getGoodsDetails();
    this.getDiscountsData();
    //#ifdef H5
    this.isLogin && silenceBindingSpread();
    //#endif
    if (this.isLogin) {
      // this.downloadFilePromotionCode();
      this.getHistory()
    }
  },
  onReady() {
    this.isNodes++;
    this.$nextTick(function() {
      // #ifdef MP
      const menuButton = uni.getMenuButtonBoundingClientRect();
      const query = uni.createSelectorQuery().in(this);
      query
          .select('#home')
          .boundingClientRect(data => {
            this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
          })
          .exec();
      // #endif
    });
  },
  onShow() {
    let that = this
    // that.getConfig();
    uni.hideLoading();
  },
  /**
   * 用户点击右上角分享
   */
  // #ifdef MP
  onShareAppMessage: function() {
    let that = this;
    that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
    return {
      title: that.storeInfo.store_name || '',
      imageUrl: that.storeInfo.image || '',
      path: '/pages/other/goods_details/chain_boost?id=' + that.id + '&spid=' + that.uid,
    }
  },
  onShareTimeline: function() {
    let that = this;
    that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
    return {
      title: that.storeInfo.store_name || '',
      query: {
        id: that.id,
        spid: that.uid
      },
      imageUrl: that.storeInfo.image || ''
    }
  },
  // #endif
  methods: {
    call: function(){
      let that = this;
      if(that.storeInfo.merchant.service_phone){
        uni.showModal({
          title: '提示',
          content: '暂无在线客服，确定拨打客服电话:'+that.storeInfo.merchant.service_phone+'吗？',
          success: function(res) {
            if (res.confirm) {
              uni.makePhoneCall({
                // 手机号
                phoneNumber: that.storeInfo.merchant.service_phone,
                // 成功回调
                success: (res) => {},
                // 失败回调
                fail: (res) => {}
              });
            }
          }
        })
      }else{
        return that.$util.Tips({
          title: '暂无可用客服'
        })
      }
    },
    getConfig() {
      let self = this
      // 获取配置
      getconfig().then(res => {

      }).catch(err => {})
    },
    /**到货通知*/
    arrivalNotice(){
      let that = this;
      // #ifdef MP
      arrivalSubscribe().then((res) => {
        that.arrivalNoticeFun();
      }).catch(err => {
        console.log(err)
      });
      // #endif
      // #ifndef MP
      that.arrivalNoticeFun();
      // #endif
    },
    arrivalNoticeFun(){
      let that = this;
      let uniqueValue = that.uniqueValue;
      let typeValue = 0;
      // #ifdef MP
      typeValue = 3
      // #endif
      // #ifdef H5
      if(this.$wechat.isWeixin() === true){
        typeValue = 2
      }else{
        typeValue = 1
      }
      // #endif
      arrivalNoticeApi({ unique: uniqueValue,type:typeValue,product_id: that.id }).then(res => {
        return that.$util.Tips({
          title: res.message
        })
      }).catch(err => {
        //状态异常返回上级页面
        return that.$util.Tips({
          title: err
        })
      })
    },
    goProDetail(item) {
      uni.redirectTo({
        url: '/pages/other/goods_details/chain_boost?id=' + item.product_id
      })
    },
    //下拉导航页面跳转
    linkPage(url) {
      if (['/pages/index/index', '/pages/order_addcart/order_addcart',
        '/pages/user/index', '/pages/plant_grass/index'
      ].indexOf(url) > -1) {
        uni.switchTab({
          url
        })
      } else {
        uni.navigateTo({
          url
        })
      }
      this.currentPage = false
    },
    boxStatus(data) {
      this.showAnimate = data
    },
    closeChange: function() {
      this.$set(this.sharePacket, 'isState', true);
    },
    showNav() {
      this.currentPage = !this.currentPage;
    },
    hideNav() {
      this.currentPage = false;
    },
    /**查看运费说明*/
    showShip: function() {
      this.$refs.guartemplate.showShippingTel();
    },
    /**查看服务保障*/
    showGuaranee: function() {
      this.$refs.guartemplate.showGuaranteeTel();
    },
    /*查看套餐详情*/
    openCombo(){
      this.$refs.discounts.showPopup(this.id);
    },
    seeSpecs() {
      this.specsInfo.show = true;
    },
    mySpecs() {
      this.$set(this.specsInfo, 'show', false);
    },
    /*获取套餐列表数据*/
    getDiscountsData(){
      getDiscountsLst({product_id: this.id}).then(res => {
        this.comboTotal = res.data.count;
        res.data.list.forEach((item, index) => {
          item.save_price = 0;
          item.discountsProduct.forEach((v, i) => {
            item.save_price += parseFloat(v.product.ot_price) - parseFloat(v.product.price)
          })
        })
        this.comboList = res.data.list;
      }).catch(err => {

      });
    },
    /*获取价格说明*/
    getPricrRule() {
      priceRuleApi(this.storeInfo.cate_id).then(res => {
        this.priceRule = res.data
      }).catch(err => {

      });
    },
    goActivity: function(e) {
      let item = e;
      if (item.type === "1") {
        uni.navigateTo({
          url: `/pages/activity/goods_seckill_details/index?id=${item.id}&time=${item.time}&status=1`
        });
      } else if (item.type === "2") {
        uni.navigateTo({
          url: `/pages/activity/goods_bargain_details/index?id=${item.id}&bargain=${this.uid}`
        });
      } else {
        uni.navigateTo({
          url: `/pages/activity/goods_combination_details/index?id=${item.id}`
        });
      }
    },
    /**
     * 购物车手动填写
     *
     */
    iptCartNum: function(e) {
      this.$set(this.attr.productSelect, 'cart_num', e);
    },
    // 后退
    returns: function() {
      uni.navigateBack()
    },
    // 首页
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    // 种草详情
    goPlant(item){
      if(item.is_type == 1){
        uni.navigateTo({
          url: '/pages/plantGrass/plant_detail/index?id='+item.community_id
        });
      }else{
        uni.navigateTo({
          //#ifdef APP
          url: '/pages/short_video/appSwiper/index?id='+item.community_id+'&tab=1'
          //#endif
          //#ifndef APP
          url: '/pages/short_video/nvueSwiper/index?id='+item.community_id+'&tab=1'
          //#endif
        });
      }
    },
    tap: function(index) {
      var id = "past" + index;
      var index = index;
      var that = this;
      this.$set(this, 'toView', id);
      this.$set(this, 'navActive', index);
      this.$set(this, 'lock', true);
      this.$set(this, 'scrollTop', index > 0 ? that.topArr[index] - (app.globalData.navHeight / 2) : that.topArr[index]);
    },
    scroll: function(e) {
      var that = this,
          scrollY = e.detail.scrollTop;
      var opacity = scrollY / 200;
      opacity = opacity > 1 ? 1 : opacity;
      that.$set(that, 'showAnimate', false);
      that.$set(that, 'opacity', opacity);
      that.$set(that, 'scrollY', scrollY);
      if (that.lock) {
        that.$set(that, 'lock', false)
        return;
      }
      for (var i = 0; i < that.topArr.length; i++) {
        if (scrollY < that.topArr[i] - (app.globalData.navHeight / 2) + that.heightArr[i]) {
          that.$set(that, 'navActive', i)
          break
        }
      }
      uni.$emit('scroll');
    },
    ChangCouponsClose: function() {
      this.$set(this.coupon, 'coupon', false)
    },
    /**
     * 购物车数量加和数量减
     *
     */
    ChangeCartNum: function(changeValue) {
      //changeValue:是否 加|减
      //获取当前变动属性
      let productSelect = this.productValue[this.attrValue];
      //如果没有属性,赋值给商品默认库存
      if (productSelect === undefined && !this.attr.productAttr.length)
        productSelect = this.attr.productSelect;
      //无属性值即库存为0；不存在加减；
      if (productSelect === undefined) return;
      let stock = productSelect.stock || 0;
      let num = this.attr.productSelect;
      if (changeValue) {
        num.cart_num++;
        if (num.cart_num > stock) {
          this.$set(this.attr.productSelect, "cart_num", stock);
          this.$set(this, "cart_num", stock);
        }
        if(num.cart_num > this.storeInfo.once_max_count&&this.storeInfo.once_max_count!=0&&this.storeInfo.pay_limit!=0){
          this.$set(this.attr.productSelect, "cart_num", this.storeInfo.once_max_count);
          this.$set(this, "cart_num", this.storeInfo.once_max_count);
          return this.$util.Tips({
            title: "单次购买件数不能超过"+this.storeInfo.once_max_count+"件！"
          });
        }
      } else {
        num.cart_num--;
        if (num.cart_num < 1) {
          this.$set(this.attr.productSelect, "cart_num", 1);
          this.$set(this, "cart_num", 1);
        }
        if(num.cart_num < this.storeInfo.once_min_count&&this.storeInfo.once_min_count!=0){
          this.$set(this.attr.productSelect, "cart_num", this.storeInfo.once_min_count);
          this.$set(this, "cart_num", this.storeInfo.once_min_count);
          return this.$util.Tips({
            title: "单次购买件数不能少于"+this.storeInfo.once_min_count+"件！"
          });
        }
      }
    },
    attrVal(val) {
      this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val.indexn]);
    },
    /**
     * 属性变动赋值
     *
     */
    ChangeAttr: function(res) {
      let productSelect = this.productValue[res];
      if(productSelect)this.$set(this, "uniqueValue", productSelect.unique);
      if (productSelect && productSelect.stock > 0) {
        this.$set(this.attr.productSelect, "image", productSelect.image ? productSelect.image : this.storeInfo.image);
        this.$set(this.attr.productSelect, "price", productSelect.price);
        this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
        this.$set(this.attr.productSelect, "stock", productSelect.stock);
        this.$set(this.attr.productSelect, "unique", productSelect.unique);
        this.$set(this, "uniqueValue", productSelect.unique);
        this.$set(this, "marketPrice", productSelect.ot_price);
        if (productSelect.stock == 0) {
          this.$set(this.attr.productSelect, "cart_num", 0);
        } else {
          this.$set(this.attr.productSelect, "cart_num", this.min_count || 1);
        }
        this.$set(this, "attrValue", res);
        this.$set(this, "attrTxt", "选择");
        this.$set(this, "rewardPrice", (Math.floor(productSelect.reward_rate * productSelect.price) / 100).toFixed(2));

      }
      else {
        this.$set(this.attr.productSelect, "image", productSelect.image);
        this.$set(this.attr.productSelect, "price", productSelect.price);
        this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
        this.$set(this.attr.productSelect, "stock", 0);
        this.$set(this.attr.productSelect, "unique", "");
        this.$set(this.attr.productSelect, "cart_num", 0);
        this.$set(this, "marketPrice", productSelect.ot_price);
        this.$set(this, "attrValue", res);
        this.$set(this, "attrTxt", "选择");
        this.$set(this, "rewardPrice", (Math.floor(productSelect.reward_rate * productSelect.price) / 100).toFixed(2));

      }
    },
    /**
     * 领取完毕移除当前页面领取过的优惠券展示
     */
    ChangCoupons: function(e) {
      let coupon = e;
      let couponList = this.$util.ArrayRemove(this.couponList, 'id', coupon.id);
      this.$set(this, 'couponList', couponList);
      this.getCouponList();
    },
    setClientHeight: function() {
      let that = this;
      let view = uni.createSelectorQuery().in(this).select("#list0");
      view.fields({
        size: true,
      }, data => {
        that.$set(that, 'clientHeight', data.height + 20)
      }).exec();
    },
    /**
     * 获取产品详情
     *
     */
    getGoodsDetails: function() {
      uni.showLoading({
        title: '加载中',
        mask: true
      });
      let that = this;
      console.log('id:', that.id)
      //getChainBoostProductDetail getProductDetail
      getChainBoostProductDetail(that.id).then(res => {
        uni.hideLoading();
        let storeInfo = res.data;
        if (storeInfo.video_link && storeInfo.slider_image.length > 1) {
          this.videoCoverImg = storeInfo.slider_image[0]
          storeInfo.slider_image.splice(0, 1)
        } else if (storeInfo.video_link && storeInfo.slider_image.length === 1) {
          this.videoCoverImg = storeInfo.slider_image[0]
        }
        that.$set(that, 'storeInfo', storeInfo);
        that.$set(that, 'reply', res.data.topReply ? [res.data.topReply] : []);
        that.$set(that, 'replyCount', res.data.replayData && res.data.replayData.count);
        that.$set(that, 'replyChance', res.data.replayData && res.data.replayData.rate);
        that.$set(that.attr, 'productAttr', res.data.attr);
        that.$set(that, 'productValue', res.data.sku);
        that.$set(that.sharePacket, 'priceName', res.data.priceName);
        that.$set(that.sharePacket, 'max', res.data.max_extension);
        that.$set(that.sharePacket, 'min', res.data.min_extension);
        that.$set(that, 'systemStore', res.data.system_store);
        that.$set(that, 'storeSelfMention', res.data.store_self_mention);
        that.$set(that, 'PromotionCode', storeInfo.code_base);
        that.$set(that, 'activity', res.data.activity ? res.data.activity : []);
        that.$set(that, 'max_count', res.data.once_max_count);
        that.$set(that, 'pay_limit', res.data.pay_limit);
        that.$set(that, 'min_count', res.data.once_min_count);
        that.$set(that, 'svipData', res.data.show_svip_info || null);
        that.$set(that, 'svipPrice', res.data.show_svip_info && res.data.show_svip_info.show_svip_price || false);
        uni.setNavigationBarTitle({
          title: storeInfo.store_name.substring(0, 7) + "..."
        })
        that.$set(that, 'storeImage', that.storeInfo.image);
        getProductParmas(that.id).then((res) => {
          that.$set(that, 'description', res.data.content);
          if (that.description&&that.description.type == 0) {
            that.description.content = that.description.content.replace(
                /<img/gi,
                '<img style="max-width:100%;height:auto;float:left;display:block" '
            );
            that.description.content = that.description.content.replace(
                /<video/gi,
                '<video style="width:100%;height:300px;display:block" '
            );
          }
          that.$set(that, 'guarantee', res.data.guarantee ? res.data.guarantee : []);
          that.$set(that, 'shippingValue', res.data.temp ? res.data.temp.name : '');
          that.$set(that, 'shipping', res.data.temp ? res.data.temp.info : '');
          that.$set(that.specsInfo, 'params', res.data.params);
          that.$set(that.storeInfo, 'merchant', res.data.merchant);
          that.$set(that.storeInfo, 'spu_id', res.data.spu_id);
          that.$set(that.storeInfo, 'community', res.data.community);
          that.$set(that.storeInfo, 'atmosphere_pic', res.data.atmosphere_pic);
          that.$set(that.storeInfo, 'top_pid', res.data.top_pid);
          that.$set(that.storeInfo, 'top_num', res.data.top_num);
          that.$set(that.storeInfo, 'top_name', res.data.top_name);
          var recommendArr = [];
          for(var i=0,len=res.data.merchant.recommend.length;i<len;i+=6){
            recommendArr.push(res.data.merchant.recommend.slice(i,i+6));
          }
          that.recommend = recommendArr
        })
        if (that.isLogin) {
          // that.downloadFilePromotionCode();
          that.getCartCount();
        };
        // #ifdef H5
        that.ShareInfo();
        // #endif
        setTimeout(function() {
          that.infoScroll();
        }, 500);
        that.DefaultSelect();
        that.getPricrRule(that.storeInfo.cate_id)
        that.$nextTick(function() {
          that.getCouponList();
        })
      }).catch(err => {
        //状态异常返回上级页面
        console.log('err', err)
        return that.$util.Tips({
          title: err,
        }, {
          tab: 3,
          url: 1
        });
      })
    },
    infoScroll: function() {
      var that = this,
          topArr = [],
          heightArr = [];
      for (var i = 0; i < that.navList.length; i++) { //productList
        //获取元素所在位置
        var query = uni.createSelectorQuery().in(this);
        var idView = "#past" + i;
        query.select(idView).boundingClientRect();
        query.exec(function(res) {
          var top = res[0].top;
          var height = res[0].height;
          topArr.push(top);
          heightArr.push(height);
          that.$set(that, 'topArr', topArr);
          that.$set(that, 'heightArr', heightArr);
        });
      };
    },
    /**
     * 默认选中属性
     *
     */
    DefaultSelect: function() {
      let productAttr = this.attr.productAttr;
      let value = [];
      let arr = []
      let unSortArr = []
      for (var key in this.productValue) {
        if (this.productValue[key].stock > 0) {
          value = this.attr.productAttr.length ? key.split(",") : [];
          break;
        }
      }
      for (let i = 0; i < productAttr.length; i++) {
        this.$set(productAttr[i], "index", value[i]);
      }
      //sort();排序函数:数字-英文-汉字；
      let productSelect = this.productValue[value.join(",")];
      this.$set(this, "rewardPrice", (Math.floor(productSelect.reward_rate * productSelect.price) / 100).toFixed(2));

      if (productSelect && productAttr.length) {
        this.$set(
            this.attr.productSelect,
            "store_name",
            this.storeInfo.store_name
        );
        this.$set(this.attr.productSelect, "image", productSelect.image ? productSelect.image : this.storeInfo.image);
        this.$set(this.attr.productSelect, "price", productSelect.price);
        this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
        this.$set(this.attr.productSelect, "stock", productSelect.stock);
        this.$set(this.attr.productSelect, "unique", productSelect.unique);
        this.$set(this, "uniqueValue", productSelect.unique);
        this.$set(this, "marketPrice", productSelect.ot_price);
        this.$set(this, "attrValue", value.join(","));
        this.$set(this, "attrTxt", "选择");
        if (productSelect.stock == 0) {
          this.$set(this.attr.productSelect, "cart_num", 0);
        } else {
          this.$set(this.attr.productSelect, "cart_num", this.min_count || 1);
        }
      } else if (!productSelect && productAttr.length) {
        this.$set(
            this.attr.productSelect,
            "store_name",
            this.storeInfo.store_name
        );
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(this.attr.productSelect, "price", this.storeInfo.price);
        this.$set(this.attr.productSelect, "svip_price", this.storeInfo.svip_price);
        this.$set(this.attr.productSelect, "stock", 0);
        this.$set(this.attr.productSelect, "unique", "");
        this.$set(this, "uniqueValue", "");
        this.$set(this.attr.productSelect, "cart_num", 0);
        this.$set(this, "marketPrice", this.storeInfo.ot_price);
        this.$set(this, "attrValue", "");
        this.$set(this, "attrTxt", "选择");
      } else if (!productSelect && !productAttr.length) {
        this.$set(
            this.attr.productSelect,
            "store_name",
            this.storeInfo.store_name
        );
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(this.attr.productSelect, "price", this.storeInfo.price);
        this.$set(this.attr.productSelect, "svip_price", this.storeInfo.svip_price);
        this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
        this.$set(this.attr.productSelect, "unique", this.storeInfo.unique || "");
        this.$set(this, "uniqueValue", this.storeInfo.unique || "");
        this.$set(this, "marketPrice", this.storeInfo.ot_price);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", "");
        this.$set(this, "attrTxt", "选择");
      } else if (productSelect && !productAttr.length) {
        this.$set(this.attr.productSelect, "store_name", this.storeInfo.store_name);
        this.$set(this.attr.productSelect, "image", productSelect.image);
        this.$set(this.attr.productSelect, "price", productSelect.price);
        this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
        this.$set(this.attr.productSelect, "stock", productSelect.stock);
        this.$set(this.attr.productSelect, "unique", productSelect.unique);
        this.$set(this, "uniqueValue", productSelect.unique);
        this.$set(this, "marketPrice", productSelect.ot_price);
        this.$set(this, "attrValue", value.join(","));
        this.$set(this, "attrTxt", "选择");
        if (productSelect.stock == 0) {
          this.$set(this.attr.productSelect, "cart_num", 0);
        } else {
          this.$set(this.attr.productSelect, "cart_num", this.min_count || 1);
        }
      }
    },
    /**
     * 获取优惠券
     *
     */
    getCouponList() {
      let that = this;
      let goodsArr = []
      let couponList = [];
      let activeList = []
      getCoupons({
        ids: that.id
      }).then(res => {
        goodsArr = res.data
        getShopCoupons(that.storeInfo.mer_id).then(({
                                                      data
                                                    }) => {
          couponList = goodsArr.concat(data)
          that.$set(that.coupon, 'list', couponList);
          for (let i = 0; i < couponList.length; i++) {
            if (!couponList[i].issue && activeList.length < 2) {
              activeList.push(couponList[i]);
            }
          }
          that.$set(that, 'couponList', activeList);
        })
      });
    },
    ChangCouponsUseState(index) {
      let that = this;
      that.$set(that.coupon, 'coupon', false);
    },
    /**
     *
     *
     * 收藏商品
     */
    setCollect: function() {
      if (this.isLogin === false) {
        toLogin()
      } else {
        let that = this;
        if (this.storeInfo.isRelation) {
          collectDel({
            type: 0,
            type_id: this.id
          }).then(res => {
            that.$util.Tips({
              title: '已取消收藏'
            });
            that.$set(that.storeInfo, 'isRelation', !that.storeInfo.isRelation);
          }).catch(err=>{
            that.$util.Tips({
              title: err
            });
          })
        } else {
          collectAdd({
            type_id: this.id,
            type: 0
          }).then(res => {
            that.$util.Tips({
              title: '收藏成功'
            });
            that.$set(that.storeInfo, 'isRelation', !that.storeInfo.isRelation);
          }).catch(err=>{
            that.$util.Tips({
              title: err
            });
          })
        }
      }
    },
    /**
     * 打开属性插件
     */
    selecAttr: function() {
      this.$set(this.attr, 'cartAttr', true);
      this.$set(this, 'isOpen', true);
    },
    /**
     * 打开优惠券插件
     */
    couponTap: function() {
      let that = this;
      if (that.isLogin === false) {
        toLogin()
      } else {
        that.$set(that.coupon, 'coupon', true);
      }
    },
    goCustomer: function() {
      let that = this;
      if (that.isLogin === false) {
        toLogin()
      } else {
        uni.navigateTo({
          url: `/pages/chat/customer_list/chat?mer_id=${that.storeInfo.mer_id}&uid=${that.uid}&productId=${that.id}`
        });
      }
    },
    onMyEvent: function() {
      this.$set(this.attr, 'cartAttr', false);
      this.$set(this, 'isOpen', false);
    },
    /**
     * 打开属性加入购物车
     *
     */
    joinCart: function(e) {
      //是否登录
      if (this.isLogin === false) {
        toLogin()
      } else {
        this.goCat();
      }
    },
    /*
     * 加入购物车
     */
    goCat: function(news) {
      let that = this,
          productSelect = that.productValue[this.attrValue];
      //打开属性
      if (that.attrValue) {
        //默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
        that.attr.cartAttr = !that.isOpen ? true : false;
        // if(!that.isOpen)that.attr.cartAttr = true
      } else {
        if (that.isOpen) that.attr.cartAttr = true;
        else
          that.attr.cartAttr = !that.attr.cartAttr;
      }
      //只有关闭属性弹窗时进行加入购物车
      if (that.attr.cartAttr === true && that.isOpen === false)
        return (that.isOpen = true);
      that.isOpen = that.attr.cartAttr = true;
      //如果有属性,没有选择,提示用户选择
      if (
          that.attr.productAttr.length &&
          that.isOpen === true &&
          productSelect.stock == 0
      )
        return that.$util.Tips({
          title: "产品库存不足，请选择其它"
        });
      if (that.attr.productSelect.cart_num == 0) {
        return that.$util.Tips({
          title: '购买个数不能为0！'
        })
      }
      let q = {
        is_new: news === undefined ? 0 : 1,
        product_id: that.id,
        cart_num: that.attr.productSelect.cart_num,
        product_attr_unique: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : "",
        source: this.source,
        product_type: 6,
        spread_id: this.currSpid
      };
      postCartAdd(q)
          .then(function(res) {
            that.isOpen = that.attr.cartAttr = false;
            let cartId = res.data.cart_id
            let arr = (Cache.get(CART_ID)&&JSON.parse(Cache.get(CART_ID))) || []
            // let arr = []
            arr.push(cartId)
            Cache.set(CART_ID, Array.from([...new Set(arr)]))
            const timestamp = Date.now();
            Cache.set(CART_TIME,timestamp)
            if (news) {
              uni.navigateTo({
                url: '/pages/users/order_confirm/index?cartId=' + cartId
              });
            } else {
              that.$util.Tips({
                title: "添加购物车成功",
                success: () => {
                  that.getCartCount(true);
                }
              });
            }
          })
          .catch(res => {
            return that.$util.Tips({
              title: res
            });
          });
    },
    /**
     * 获取购物车数量
     * @param boolean 是否展示购物车动画和重置属性
     */
    getCartCount: function(isAnima) {
      let that = this;
      const isLogin = that.isLogin;
      if (isLogin) {
        getCartCounts().then(res => {
          that.CartCount = res.data[0].count;
          //加入购物车后重置属性
          if (isAnima) {
            that.animated = true;
            setTimeout(function() {
              that.animated = false;
            }, 500);
          }
        });
      }
    },
    /**
     * 立即购买
     */
    goBuy: function(e) {
      if (this.isLogin === false) {
        toLogin()
      } else {
        this.goCat(true);
      }
    },
    /**
     * 分享打开
     *
     */
    listenerActionSheet: function() {
      // #ifdef H5
      if (this.$wechat.isWeixin() === true) {
        this.weixinStatus = true;
      }
      // #endif
      this.posters = true;
    },
    // 分享关闭
    listenerActionClose: function() {
      this.posters = false;
      this.currentPage = false;
    },
    //隐藏海报
    posterImageClose: function() {
      this.posterImageStatus = false
    },
    //替换安全域名
    setDomain: function(url) {
      url = url ? url.toString() : '';
      //本地调试打开,生产请注销
      if (url.indexOf("https://") > -1) return url;
      else return url.replace('http://', 'https://');
    },
    /**
     * 获取产品分销二维码
     * @param function successFn 下载完成回调
     *
     */
    downloadFilePromotionCode: function(successFn) {
      let that = this;
      let type;
      // #ifndef MP
      type = 'wechat'
      // #endif
      // #ifdef MP
      type = 'routine'
      // #endif
      getProductCode(that.id, {
        type: type,
        product_type: 6
      }).then(async res => {
        that.codeImg = res.data.url
        that.goPoster()
      }).catch(err => {
        that.$util.Tips({
          title: err
        });
        that.posters = false;
        that.$set(that, 'PromotionCode', '');

      });
    },
    // 小程序关闭分享弹窗；
    goFriend: function() {
      this.posters = false;
      this.currentPage = false;
    },
    /**
     * 生成海报
     */
    async goPoster() {
      if (this.posterImage) {
        this.posterImageStatus = true
        this.posters = false
        return
      }
      let that = this;
      let arr2
      that.posters = false;
      that.$set(that, 'canvasStatus', true);
      uni.showLoading({
        title: '海报生成中',
        mask: true
      });
      // #ifdef MP || APP-PLUS
      arr2 = [that.posterbackgd, await that.fileStoreImage(that.storeImage), await that.fileStoreImage(
          that.codeImg), await that.fileStoreImage(that.share_pic)];
      // #endif
      // #ifdef H5
      arr2 = [that.posterbackgd, await that.imgToBase(that.storeImage), await that.imgToBase(that.codeImg), await that.imgToBase(that.share_pic)];
      // #endif
      //生成推广海报
      that.$util.goodsPosterCanvas(arr2, that.storeInfo.store_name, that.storeInfo.price, that.site_name, that.storeInfo.ot_price, function(tempFilePath) {
        that.$set(that, 'posterImage', tempFilePath);
        that.$set(that, 'posterImageStatus', true);
        that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
        that.$set(that, 'canvasStatus', false);
      }, (err) => {
        that.$set(that, 'canvasStatus', false);
      });
    },
    //图片转符合安全域名路径
    fileStoreImage(url) {
      if(url){
        // #ifdef MP  || APP-PLUS
        let ishttps = url.split('//')[0] == 'https:'
        if (!ishttps) {
          url = 'https://'+url.split('//')[1]
        }
        // #endif
        return new Promise((resolve, reject) => {
          let that = this;
          uni.downloadFile({
            url: url,
            success: function(res) {
              resolve(res.tempFilePath);
            },
            fail: function(error) {
              console.log(error)
              return that.$util.Tips({
                title: '请检查图片地址是否在合法域名内'
              });
            }
          });
        })
      }
    },
    /*
     * 保存到手机相册
     */
    // #ifdef MP
    savePosterPath: function() {
      let that = this;
      uni.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                uni.saveImageToPhotosAlbum({
                  filePath: that.posterImage,
                  success: function(res) {
                    that.posterImageClose();
                    that.$util.Tips({
                      title: '保存成功',
                      icon: 'success'
                    });
                  },
                  fail: function(res) {
                    that.$util.Tips({
                      title: '保存失败'
                    });
                  }
                })
              }
            })
          } else {
            uni.saveImageToPhotosAlbum({
              filePath: that.posterImage,
              success: function(res) {
                that.posterImageClose();
                that.$util.Tips({
                  title: '保存成功',
                  icon: 'success'
                });
              },
              fail: function(res) {
                that.$util.Tips({
                  title: '保存失败'
                });
              },
            })
          }
        }
      })
    },
    // #endif
    // #ifdef APP-PLUS
    savePosterPath(){
      let that = this
      uni.saveImageToPhotosAlbum({
        filePath: that.posterImage,
        success: function(res) {
          that.posterImageClose();
          that.$util.Tips({
            title: '保存成功',
            icon: 'success'
          });
        },
        fail: function(res) {
          that.$util.Tips({
            title: '保存失败'
          });
        },
      })
    },
    // #endif
    //#ifdef H5
    ShareInfo() {
      let data = this.storeInfo;
      let href = location.href;
      if (this.$wechat.isWeixin()) {
        getUserInfo().then(res => {
          href =
              href.indexOf("?") === -1 ?
                  href + "?spid=" + res.data.uid :
                  href + "&spid=" + res.data.uid;
          let configAppMessage = {
            desc: data.store_info,
            title: data.store_name,
            link: href,
            imgUrl: data.image
          };
          this.$wechat.wechatEvevt([
            "updateAppMessageShareData",
            "updateTimelineShareData",
            "onMenuShareAppMessage",
            "onMenuShareTimeline"
          ], configAppMessage).then(res => {
          }).catch(err => {
            console.log(err);
          })
        });
      }
    },
    //#endif
    async imgToBase(url) {
      let res = await imgToBase({
        image: url
      })
      return res.data.image
    },
    //复制口令
    copyPwd(){
      let that = this;
      copyPasswordApi({
        id: that.id,
        product_type: 6
      }).then(async res => {
        that.copyUrl = res.data.str;
        that.posters = false
        that.isCopy = true;
      })
    },
    closeCopy(){
      this.isCopy = false
    },
    // APP分享
    appShare(scene){
      let that = this
      uni.showLoading({
        title: '加载中',
        mask: true
      });
      let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
      let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
      uni.share({
        provider: "weixin",
        scene: scene,
        type: 0,
        href: `${HTTP_REQUEST_URL}${curRoute}&spid=${that.uid}`,
        title: that.storeInfo.store_name,
        summary: that.storeInfo.store_info,
        imageUrl: that.storeInfo.image,
        success: function(res) {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
          that.posters = false;
          uni.hideLoading();
        },
        fail: function(err) {
          uni.showToast({
            title: '分享失败',
            icon: 'none',
            duration: 2000
          })
          that.posters = false;
          uni.hideLoading();
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.ml8{
  top:2rpx
}
.activity_pin {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(250, 101, 20, 1) 100%);
  opacity: 1;
  border-radius: 22rpx;
  padding: 0 15rpx;
  margin-left: 19rpx;
}
.activity_miao {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  background: linear-gradient(90deg, rgba(250, 102, 24, 1) 0%, rgba(254, 161, 15, 1) 100%);
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}
.iconfonts {
  color: #fff !important;
  font-size: 28rpx;
}
.activity_title {
  font-size: 24rpx;
  color: #fff;
}
.activity_kan {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  background: linear-gradient(90deg, rgba(254, 159, 15, 1) 0%, rgba(254, 178, 15, 1) 100%);
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}
.t-color {
  color: var(--view-theme);
}
.p-color {
  color: var(--view-priceColor);
}
.bt-color {
  background-color: var(--view-theme);
  border: 1px solid var(--view-theme);
}
.head-bar {
  background: #fff;
}

.generate-posters {
  width: 100%;
  height: 170rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 388;
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  border-top: 1px solid #eee;
}
.generate-posters.on {
  transform: translate3d(0, 0, 0);
}
.generate-posters .item {
  /* #ifdef H5 */
  flex: 50%;
  /* #endif */
  /* #ifndef H5 */
  flex: 33.33%;
  /* #endif */
  text-align: center;
  font-size: 30rpx;
  &.item3{
    flex: 33.33%;
  }
}
.generate-posters .item .iconfont {
  font-size: 80rpx;
  color: #5eae72;
}
.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}
.generate-posters .item .iconfont.icon-fuzhikouling1 {
  color: #FBB324;
}

.product-con .reward {
  display: inline-block;
  // margin: 0rpx 0rpx 0 0;
  color: #146400;
  //background-color: #FFF4E6;
  background-image: url("https://milife-1327809043.cos.ap-shanghai.myqcloud.com/def/dbf46202408132213599565.png");
  background-size: 220rpx;
  width: 65rpx;
  height: 35rpx;
  line-height: 40rpx;
  border-radius: 0rpx;
  padding: 15rpx 80rpx;
  font-size: 36rpx;
  font-weight: normal;

  &:last-child {
    margin-left: 0;
  }
}

.product-con .footer {
  padding: 0 20rpx 0 40rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  height: 100rpx;
  height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  background-color: #fff;
  z-index: 277;
  border-top: 1px solid #f0f0f0;
  &.footpl{
    padding-left: 80rpx;
  }
}
.product-con .footer .item {
  font-size: 18rpx;
  color: #666;
  text-align: center;
}
.product-con .attribute .atterTxt {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 400rpx;
}
.product-con .attribute .params{
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #282828;
  &:nth-child(2){
    margin-right: 0;
  }
}
.product-con .attribute .atterTxt1{
  color: #282828;
  &.hasAttr{
    &:after{
      content: "";
      display: inline-block;
      position: relative;
      top: -6rpx;
      margin: 0 6rpx;
      width: 5rpx;
      height: 5rpx;
      background-color: #282828;
      border-radius: 100%;
    }
    &:last-child{
      &:after{
        display: none;
      }
    }
  }
}
.product-con .wrapper .coupon .activity {
  border: 1px solid var(--view-theme);
  color: var(--view-theme);
  &::before,&::after{
    border: 1px solid var(--view-theme);
  }
  &::before{
    border-left-color: #ffffff;
  }
  &::after{
    border-right-color: #ffffff;
  }
}
.product-con .guaranteeAttr{
  display: inline-block;
  width: 560rpx;
  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.product-con .footer .item .iconfont {
  text-align: center;
  font-size: 40rpx;
}
.fenxiang_btn{
  .icon-yishoucang2{
    color: var(--view-priceColor)!important;
  }
}
.product-con .wrapper .introduce {
  margin: 20rpx 30rpx 0;
  &.atmosphere {
    padding: 20rpx 30rpx;
    margin: 0;
    justify-content: space-between;
    align-items: flex-start;
    .title{
      width: 540rpx;
    }
  }

  .font-bg-red{
    position: relative;
    /* #ifdef H5 */
    top: -2rpx;
    /* #endif */
    /* #ifndef H5 */
    top: -4rpx;
    /* #endif */
  }
}
.product-con .footer .item .iconfont.icon-shoucang1 {
  color: var(--view-priceColor);
}
.integral_count{
  padding: 0 30rpx;
}
.product-con .integral{
  display: inline-block;
  margin: 20rpx 30rpx 0 0;
  color: #FF9000;
  background-color: #FFF4E6;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 22rpx;
  padding: 0 26rpx;
  font-size: 24rpx;
  font-weight: normal;
  &:last-child{
    margin-left: 0;
  }
}
.product-con .footer .item .iconfont.icon-gouwuche1 {
  font-size: 40rpx;
  position: relative;
}
.product-con .footer .item .iconfont.icon-gouwuche1 .num {
  color: #fff;
  position: absolute;
  font-size: 18rpx;
  height: 30rpx;
  border-radius: 200rpx;
  padding: 0 8rpx;
  box-sizing: border-box;
  top: -10rpx;
  right: -10rpx;
  background-color: var(--view-theme);
  min-width: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-con .footer .bnt {
  width: 444rpx;
  height: 76rpx;
}
.product-con .footer .bnt .bnts {
  width: 222rpx;
  text-align: center;
  line-height: 76rpx;
  color: #fff;
  font-size: 28rpx;
  &.sold_out {
    width: 444rpx;
    border-radius: 50rpx;
  }
  &.virtual_buy {
    width: 444rpx;
    border-radius: 50rpx;
  }
}
.product-con .footer .bnt .joinCart {
  border-radius: 50rpx 0 0 50rpx;
  background-image: linear-gradient(90deg, var(--view-bntColor11) 0%, var(--view-bntColor12) 100%);
  &.disabled{
    background: #bbb;
  }
}
.product-con .footer .bnt .buy {
  border-radius: 0 50rpx 50rpx 0;
  background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
}
.product-con .footer .bnt .buy[disabled] {
  background: #bbb;
}
.product-con .superior {
  background-color: #fff;
  margin-top: 20rpx;
  padding-bottom: 10rpx;
}
.product-con .superior .title {
  height: 98rpx;
}
.product-con .superior .title image {
  width: 30rpx;
  height: 30rpx;
}
.product-con .superior .title .titleTxt {
  margin: 0 20rpx;
  font-size: 30rpx;
  background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.product-con .superior .slider-banner {
  width: 690rpx;
  margin: 0 auto;
  position: relative;
}
.product-con .superior .slider-banner swiper {
  height: 100%;
  width: 100%;
}
.product-con .superior .slider-banner swiper-item {
  height: 100%;
}
.product-con .superior .slider-banner .list {
  width: 100%;
}
.product-con .superior .slider-banner .list .item {
  width: 215rpx;
  margin: 0 22rpx 30rpx 0;
  font-size: 26rpx;
}
.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
  margin-right: 0;
}
.product-con .superior .slider-banner .list .item .pictrue {
  position: relative;
  width: 100%;
  height: 215rpx;
}
.product-con .superior .slider-banner .list .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}
.product-con .superior .slider-banner .list .item .name {
  color: #282828;
  margin-top: 12rpx;
}
.product-con .superior .slider-banner .swiper-pagination-bullet {
  background-color: #999;
}
.product-con .superior .slider-banner .swiper-pagination-bullet-active {
  background-color: #e93323;
}
.svipCon {
  height: 64rpx;
  padding: 0 20rpx;
  margin: 8rpx 20rpx 0;
  background: #FAE3BB;
  font-size: 24rpx;
  color: #B37400;
  border-radius: 10rpx;
  image{
    width: 38rpx;
    height: 38rpx;
    margin-right: 20rpx;
  }
}
.svipCon .svipBtn {
  font-size: 22rpx;
  .iconfont{
    font-size: 18rpx;
    margin-left: 4rpx;
  }
}
button {
  padding: 0;
  margin: 0;
  line-height: normal;
  background-color: #fff;
}
button::after {
  border: 0;
}
action-sheet-item {
  padding: 0;
  height: 240rpx;
  align-items: center;
  display: flex;
}
.contact {
  font-size: 16px;
  width: 50%;
  background-color: #fff;
  padding: 8rpx 0;
  border-radius: 0;
  margin: 0;
  line-height: 2;
}
.contact::after {
  border: none;
}
.action-sheet {
  font-size: 17px;
  line-height: 1.8;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25rpx 0;
}
.canvas {
  z-index: 300;
  width: 750px;
  height: 1190px;
}
.poster-pop {
  width: 600rpx;
  height: 897rpx;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 399;
  top: 50%;
  margin-top: -500rpx;
}
.poster-pop image {
  width: 100%;
  height: 100%;
  display: block;
}
.poster-pop .close {
  width: 46rpx;
  height: 75rpx;
  position: fixed;
  right: 0;
  top: -73rpx;
  display: block;
}
.poster-pop .save-poster {
  background-color: #df2d0a;
  font-size: 22rpx;
  color: #fff;
  text-align: center;
  height: 76rpx;
  line-height: 76rpx;
  width: 100%;
  border-radius: 43rpx;
  margin-top: 20rpx;
}
.poster-pop .keep {
  color: #fff;
  text-align: center;
  font-size: 25rpx;
  margin-top: 10rpx;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
}
.pictrue_log {
  width: 80upx;
  height: 40upx;
  border-radius: 6upx 0 12upx 0;
  line-height: 40upx;
  font-size: 24upx;
}
.pictrue_log_class {
  z-index: 3;
  background: -webkit-gradient(linear, left top, right top, from(rgba(246, 122, 56, 1)), to(rgba(241, 27, 9, 1)));
  background: linear-gradient(90deg, rgba(246, 122, 56, 1) 0%, rgba(241, 27, 9, 1) 100%);
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  text-align: center;
}
.navbar .header {
  height: 96rpx;
  font-size: 30rpx;
  color: #050505;
  background-color: #fff;
  /* #ifdef MP */
  padding-right: 95rpx;
  /* #endif */
}
.navbar .header .item {
  position: relative;
  margin: 0 25rpx;
}
.navbar .header .item.on:before {
  position: absolute;
  width: 60rpx;
  height: 5rpx;
  background-repeat: no-repeat;
  content: "";
  background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
  bottom: -10rpx;
  left: 50%;
  margin-left: -28rpx;
}
.navbar {
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}
.navbar .navbarH {
  position: relative;
}
.navbar .navbarH .navbarCon {
  position: absolute;
  bottom: 0;
  height: 100rpx;
  width: 100%;
}
.share-box {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  image {
    width: 100%;
    height: 100%;
  }
}
.store-wrapper {
  margin-top: 20rpx;
  background-color: #fff;
  .store-hd {
    padding: 30rpx;
    border-bottom: 1px solid #F5F5F5;
    .store-info {
      position: relative;
      display: flex;
      .store-margin{
        width: 24rpx;
        height: 26rpx;
        margin-left: 10rpx;
      }
      .logo {
        width: 86rpx;
        height: 86rpx;
        image {
          width: 86rpx;
          height: 86rpx;
          border-radius: 6rpx;
        }
      }
      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20rpx;
        .name {
          font-size: 28rpx;
          color: #282828;
          font-weight: bold;
          display: flex;
          align-items: center;
        }
        .txt {
          margin-top: 8rpx;
          color: #666666;
          font-size: 22rpx;
        }
      }
      .link {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 114rpx;
        height: 50rpx;
        background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
        border-radius: 25rpx;
        color: #fff;
      }
    }
    .score-wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      .item {
        color: #948D8C;
        font-size: 26rpx;
        text {
          margin-left: 10rpx;
          color: var(--view-priceColor);
        }
      }
    }
  }
  .con-box {
    padding: 20rpx 30rpx 0;
    .title {
      font-size: 28rpx;
      color: #282828;
    }
    .moer-btn{
      font-size: 28rpx;
      color: #999999;
    }
    .img-box {
      .img-item {
        width: 220rpx;
        margin: 30rpx 15rpx 0 0;
        display: inline-block;
        &:nth-child(3n){
          margin-right: 0;
        }
        /deep/image,/deep/uni-image,/deep/.easy-loadimage  {
          width: 218rpx;
          height: 220rpx;
          border-radius: 16rpx;
          display: inline-block;
        }
        .txt {
          .title {
            font-size: 28rpx;
            color: #282828;
            margin-top: 15rpx;
          }
          .price {
            color: var(--view-priceColor);
            font-size: 28rpx;
            text {
              font-size: 20rpx;
            }
          }
        }
      }
    }
    /deep/.uni-swiper-dot{
      width: 8rpx;
      height: 4rpx;
      background: rgba(0,0,0,.15);
    }
    /deep/.uni-swiper-dot-active{
      width: 16rpx;
      background: var(--view-theme);
    }
    .page_swiper,swiper {
      height: 760rpx;
    }
  }
}
.sys-head {
  background: transparent;
}
.swiper-item,/deep/uni-swiper-wrapper,/deep/uni-swiper{
  height: 740rpx!important;
}
.head-wrapper {
  z-index: 999;
  display: flex;
  align-items: center;
  position: fixed;
  left: 30rpx;
  top: 0;
}
.head-menu {
  display: flex;
  align-items: center;
  height: 58rpx;
  width: 158rpx;
  background: rgba(255,255,255,0.302);
  border: 2rpx solid rgba(0,0,0,0.0588);
  border-radius: 29rpx;
  .iconfont {
    flex: 1;
    text-align: center;
    color: #000000;
    box-sizing: border-box;
    &.icon-fanhui2 {
      border-right: 1px solid rgba(0,0,0,0.2);;
    }
  }
}
</style>
